<!--  -->
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="">
      <titleLine title="查询条件(点击可展开更多或收起)"></titleLine>
      <a-form>
        <a-row :gutter="queryGutter">
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="用户名"
                allowClear
                v-model="queryParam.username"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input placeholder="ID" allowClear v-model="queryParam.uid" />
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="手机号"
                allowClear
                v-model="queryParam.phone"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="电子邮箱"
                allowClear
                v-model="queryParam.email"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <div class="search-button">
            <a-button
              type="primary"
              icon="search"
              class="ml10"
              @click="getDataList(true)"
            >
              查询
            </a-button>
            <a-button type="primary" class="ml10" @click="reset">重置</a-button>
          </div>
        </a-row>
      </a-form>
    </div>
    <!-- 表格区域 -->
    <div class="">
      <dynamicTableColumn
        :column="columns"
        @changeTableHeader="changeTableHeader"
        @raverseTableHead="dynamicColumn = columns"
        @resumeDefault="dynamicColumn = columns"
      >
        <aButtonPermission
          icon="plus"
          slot="button"
          @buttonEvent="add"
          labelName="添加用户"
          buttonCode="client_user_add"
        >
        </aButtonPermission>
        <aButtonPermission
          icon="download"
          slot="button"
          @buttonEvent="exportd"
          labelName="按查询条件导出"
          buttonCode="client_user_add"
        >
        </aButtonPermission>
      </dynamicTableColumn>
      <a-table
        :columns="dynamicColumn"
        :data-source="dataSource"
        class="mt10"
        rowKey="id"
        :pagination="false"
        :scroll="{ x: 500, y: 800 }"
        :loading="tableLoading"
      >
        <template slot="enabled" slot-scope="text, record">
          <a-tag color="blue" v-if="record.enabled === 0">启用</a-tag>
          <a-tag v-if="record.enabled === 1">禁用</a-tag>
        </template>
        <template slot="credentialsNonExpired" slot-scope="text, record">
          <a-tag color="blue" v-if="record.credentialsNonExpired === 0"
            >正常</a-tag
          >
          <a-tag color="red" v-if="record.credentialsNonExpired === 1"
            >过期</a-tag
          >
        </template>
        <span slot="action" slot-scope="record">
          <aLinkPermission
            labelName="编辑"
            buttonCode="client_user_update"
            @buttonEvent="edit(record, false)"
          >
          </aLinkPermission>
          <a @click="edit(record, true)">详情</a>
          <aLinkPermission
            labelName="删除"
            buttonCode="client_user_delete"
            @buttonEvent="del(record)"
          >
          </aLinkPermission>
        </span>
      </a-table>
      <pagination
        class="pagination"
        :pagination="ipagination"
        @paginationChange="paginationChange"
        @paginationShowSizeChange="paginationShowSizeChange"
      ></pagination>
    </div>
    <Modal @handleOk="handleOk" ref="Modal"></Modal>
  </a-card>
</template>

<script>
import { Mixins } from "@/mixins/list";
import Modal from "./component/Model";
import { columns } from "./component/save";
import { exportFile } from "@/utils/FileUtil";
export default {
  name: "ClientSysUser",
  mixins: [Mixins],
  //import引入的组件需要注入到对象中才能使用
  components: {
    Modal,
  },
  data() {
    //这里存放数据
    return {
      api: {
        dataList: "/admin_server/uc/auth/user/page",
        roleList: "/admin_server/uc/auth/role/list",
        export: "/admin_server/uc/auth/user/export",
      },
      tableLoading: false,
      columns,
      dynamicColumn: [], // 动态列对象
      roleData: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * 导出所有用户
     */
    exportd() {
      const params = this.getQueryParams(); // 查询条件
      this.$request.downFile1(this.api.export, params).then((res) => {
        if (res.status === 200) {
          exportFile(res.data, `系统前台用户.xlsx`);
        }
      });
    },
    /**
     * 动态列改变时
     */
    changeTableHeader(data) {
      this.dynamicColumn = data;
    },
    del() {
      this.$message.info("正在建设中");
    },
    async getRoleList() {
      this.$request.getRequest1(this.api.roleList).then((res) => {
        if (res.success) {
          this.roleData = res.result;
        }
      });
    },
    /**
     * 提交
     */
    handleOk() {
      this.$refs.Modal.handleCancel();
      this.getDataList();
    },
    edit(record, operationDisabled) {
      this.$refs.Modal.init(
        record.id,
        operationDisabled,
        operationDisabled ? "用户详情" : "编辑用户",
        this.roleData
      );
    },
    add() {
      this.$refs.Modal.init(null, false, "新增用户", this.roleData);
    },
    /**
     * 查询
     */
    getDataList(isResetPage) {
      this.tableLoading = true;
      const params = this.getQueryParams(isResetPage); // 查询条件
      this.$request.getRequest1(this.api.dataList, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.ipagination.total = res.result.total;
        }
        this.tableLoading = false;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getRoleList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {
    this.getRoleList();
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.ant-form-item {
  margin-bottom: 0 !important;
}
</style>